<template>
  <el-row class="panel m-w-1280">
    <el-col :span="24" class="panel-top">
      <el-col :span="4">
        <template v-if="logo_type == '1'">
            <img :src="img" class="logo">
</template>

<template v-else>
  <span class="p-l-20">{{title}}</span>
</template>
			</el-col>
			<el-col :span="16" class="ofv-hd">
				<div class="fl p-l-20 p-r-20 top-menu" :class="{'top-active': menu.selected}" v-for="menu in $store.state.menus" :key="menu.id" @click="switchTopMenu(menu)">{{menu.title}}</div>
			</el-col>
			<el-col :span="4" class="pos-rel">
				<el-dropdown @command="handleMenu" class="user-menu">
		      <span class="el-dropdown-link c-gra" style="cursor: default">
		        {{username}}&nbsp;&nbsp;<i class="fa fa-user" aria-hidden="true"></i>
		      </span>
		      <el-dropdown-menu slot="dropdown">
		        <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
		        <el-dropdown-item command="logout">退出</el-dropdown-item>
		      </el-dropdown-menu>
		    </el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="panel-center">
			<aside class="ovf-hd aside" v-show="!$store.state.showLeftMenu">
				<leftMenu :menuData="menuData" :menu="menu" ref="leftMenu"></leftMenu>
			</aside>
			<section class="panel-c-c" :class="{'hide-leftMenu': hasChildMenu}">
				<div class="grid-content bg-purple-light">
            <el-col :span="24">
              <transition name="fade" mode="out-in" appear>
                <router-view></router-view>
              </transition>
            </el-col>
				</div>
			</section>
		</el-col>

		<changePwd ref="changePwd"></changePwd>

	</el-row>
</template>

<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter,
  .fade-leave-active {
    opacity: 0
  }

  .panel {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
  }

  .panel-top {
    height: 60px;
    line-height: 60px;
    background: #1F2D3D;
    color: #c0ccda;
  }

  .panel-center {
    background: #324057;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
  }

  .panel-c-c {
    background: #f1f2f7;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    left: 220px;
    overflow-y: scroll;
    padding: 20px 20px 0;
  }

  .logout {
    background: url(../assets/images/logout_36.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    float: left;
  }

  .logo {
    /*width: 150px;*/
		height: 50px;
    float: left;
    margin: 10px 10px 10px 18px;
  }

  .tip-logout {
    float: right;
    margin-right: 20px;
    padding-top: 5px;
    cursor: pointer;
  }

  .admin {
    color: #c0ccda;
    text-align: center;
  }

  .hide-leftMenu {
    left: 0px;
  }

  .aside {
    width: 220px !important;
    height: 100%;
    overflow-y: scroll !important;
  }
</style>

<script>
  import leftMenu from './Common/leftMenu.vue'
  import changePwd from './Account/changePwd.vue'
  import http from '../assets/js/http'
  import Lockr from 'lockr'
  import Cookies from 'js-cookie'
  import _ from 'lodash'
  import _g from '@/assets/js/global'
  import config from '@/assets/js/config.js'
  import { Row, Col, Dropdown, DropdownMenu, DropdownItem, MessageBox } from 'element-ui'
  Vue.use(Row)
  Vue.use(Col)
  Vue.use(Dropdown)
  Vue.use(DropdownMenu)
  Vue.use(DropdownItem)
  Vue.prototype.$confirm = MessageBox.confirm

  export default {
    data() {
      return {
        username: '',
        childMenu: [],
        menuData: [],
        hasChildMenu: false,
        menu: null,
        module: null,
        img: '',
        title: '',
        logo_type: null
      }
    },
    methods: {
      logout() {
        this.$confirm('确认退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          _g.openGlobalLoading()
          let data = {
            authkey: Lockr.get('admin-token')
          }
          this.apiPost('admin/tool/logout', data).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              Lockr.rm('admin-token')
              Lockr.rm('expire')
              Lockr.rm('rememberKey')
              Cookies.remove('rememberPwd')
              _g.toastMsg('success', '退出成功')
              setTimeout(() => {
                this.$router.replace('/')
              }, 1500)
            })
          })
        }).catch(() => {

        })
      },
      switchTopMenu(item) {
        if (!item.child) {
          this.$router.push(item.url)
        } else {
          this.$router.push(item.child[0].child[0].url)
        }
      },
      handleMenu(val) {
        switch (val) {
          case 'logout':
            this.logout()
            break
          case 'changePwd':
            this.changePwd()
            break
        }
      },
      changePwd() {
        this.$refs.changePwd.open()
      },
      getTitleAndLogo() {
        this.apiPost('admin/tool/getConfigs').then((res) => {
          this.handelResponse(res, (data) => {
            document.title = data.SYSTEM_NAME
            this.logo_type = data.LOGO_TYPE
            this.title = data.SYSTEM_NAME
            this.img = data.SYSTEM_LOGO
          })
        })
      },
      getUsername() {
        this.username = this.$store.state.user.username
      }
    },
    created() {
      this.getTitleAndLogo()
      let authKey = Lockr.get('admin-token')
      if (!authKey) {
        _g.toastMsg('warning', '您尚未登录')
        setTimeout(() => {
          this.$router.replace('/')
        }, 1500)
        return
      }
      this.getUsername()
      let menus = this.$store.state.menus
      this.menu = this.$route.meta.menu
      this.module = this.$route.meta.module
      _(menus).forEach((res) => {
        if (res.module == this.module) {
          this.menuData = res.child
          res.selected = true
        } else {
          res.selected = false
        }
      })
    },
    computed: {
      routerShow() {
        return this.$store.state.routerShow
      },
      showLeftMenu() {
        this.hasChildMenu = this.$store.state.showLeftMenu
        return this.$store.state.showLeftMenu
      }
    },
    components: {
      leftMenu,
      changePwd
    },
    watch: {
      '$route' (to, from) {
        _(this.$store.state.menus).forEach((res) => {
          if (res.module == to.meta.module) {
            res.selected = true
            if (!to.meta.hideLeft) {
              this.menu = to.meta.menu
              this.menuData = res.child
            }
          } else {
            res.selected = false
          }
        })
      }
    },
    mixins: [http]
  }
</script>
